<template>
    <page-header-wrapper :title="false">
      <a-card
        :tab-list="tabList"
        :default-active-tab-key="key"
        @tabChange="key => onTabs(key, 'key')"
      >
        <all-customer v-if="key == 1"></all-customer>
        <paid-customer v-if="key == 2"></paid-customer>
        <unpaid-customer v-if="key == 3"></unpaid-customer>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  import AllCustomer from './components/AllCustomer'
  import PaidCustomer from './components/PaidCustomer'
  import UnpaidCustomer from './components/UnpaidCustomer'

  export default {
    components: {
      AllCustomer,
      UnpaidCustomer,
      PaidCustomer
    },
    name: 'CustomerList',
    data () {
      return {
        tabList: [
          {
            key: '1',
            tab: '全部客户'
          },
          {
            key: '2',
            tab: '已成单'
          },
          {
            key: '3',
            tab: '未成单'
          }
        ],
        key: '1'
      }
    },
    methods: {
      onTabs (key, type) {
        this[type] = key
      }
    }
  }
</script>

<style scoped>

</style>
